<template>
	<!-- 解决价格闪烁 -->
	<view v-if="goodsInfo.goods_price" class="goods-detail">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, i) in goodsInfo.pics" :key="item.pics_id">
				<image :src="item.pics_big_url" @click="preview(i)"></image>
			</swiper-item>
		</swiper>
		<!-- 商品信息 -->
		<view class="info">
			<view class="info-top">￥ {{ goodsInfo.goods_price }}</view>
			<view class="info-center">
				<view class="info-center-left">{{ goodsInfo.goods_name }}</view>
				<view class="info-center-right">
					<uni-icons v-if="true" type="star" size="23"></uni-icons>
					<uni-icons v-else color="#f00" type="star-filled" size="23"></uni-icons>
					<view class="">收藏</view>
				</view>
			</view>
			<view class="info-bottom">快递 免运费</view>
		</view>
		<!-- 图文 -->
		<rich-text :nodes="goodsInfo.goods_introduce"></rich-text>
		<!-- 商品导航 -->
		<view class="goods-nav">
			<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { getGoodsDetail } from '../../api/index.js'
	export default {
		computed: {
			...mapGetters(['allCount'])
		},
		watch: {
			// 监听vuex中商品数量变化,实时更新
			allCount: {
				handler(newVal) {
					const res = this.options.find(item => item.text == '购物车')
					res.info = newVal
				},
				immediate: true
			}
		},
		data() {
			return {
				goodsId: 0, // 商品id
				goodsInfo: {}, // 商品信息
				options: [
					{
						icon: 'shop',
						text: '店铺',
						infoBackgroundColor:'#007aff',
						infoColor:"red"
					}, {
						icon: 'cart',
						text: '购物车',
						info: 0
					},
				],
				buttonGroup: [{
					text: '加入购物车',
					backgroundColor: '#ff0000',
					color: '#fff'
				},
				{
					text: '立即购买',
					backgroundColor: '#ffa200',
					color: '#fff'
				}]
			}
		},
		onLoad(options) {
			this.goodsId = options.id // 接收商品id
			this.getGoodsDetail()
		},
		methods: {
			// 获取商品详情
			async getGoodsDetail() {
				const { message } = await getGoodsDetail(this.goodsId)
				message.goods_introduce = message.goods_introduce.replace(/<img /gi, '<img style="display: block;"').replace(/webp/gi, 'jpg')
				this.goodsInfo = message
			},
			preview(i) {
				uni.previewImage({
					current: i,
					urls: this.goodsInfo.pics.map(item => item.pics_big_url)
				})
			},
			onClick (e) {
				if (e.content.text === "购物车") {
					uni.switchTab({
						url: '/pages/cart/cart'
					})
				}
			},
			buttonClick (e) {
				if (e.content.text === '加入购物车') {
					const goods = {
						goods_id: this.goodsInfo.goods_id,
						goods_name: this.goodsInfo.goods_name,
						goods_price: this.goodsInfo.goods_price,
						goods_count: 1,
						goods_small_logo: this.goodsInfo.goods_small_logo,
						goods_state: true
					}
					this.$store.commit('cart/addToCart', goods)
				}
			}   
		}
	}
</script>

<style scoped lang="scss">
.goods-detail {
	swiper {
		height: 750rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.info {
		height: 220rpx;
		padding: 22rpx;
		background-color: white;
		.info-top {
			color: #f00;
			line-height: 60rpx;
			font-size: 38rpx;
		}
		.info-center {
			padding: 20rpx 0;
			display: flex;
			line-height: 40rpx;
			.info-center-left {
				font-size: 30rpx;
			}
			.info-center-right {
				width: 130rpx;
				font-size: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-left: 1px solid #ccc;
			}
		}
		.info-bottom {
			font-size: 30rpx;
			color: #555;
		}
	}
	.goods-nav {
		position: sticky;
		bottom: 0;
		left: 0;
		width: 100%;
	}
}
</style>
